<template>
  <div>
    <div class="page">
      <div class="left">
        <Tree
          :data="treeList"
          :render="renderContent"
          :show-checkbox="true"
          :load-data="loadData"
          class="demo-tree-render"
          @on-check-change="checkChange"
        ></Tree>
      </div>
      <div class="right">
        <div class="title">
          <div class="title-name">已选货位</div>
        </div>
        <div class="content">
          <div class="content-box" v-for="(item, index) in tableList" :key="index">
            <div class="box-title">
              {{item.warehouseAreaName}}/{{item.warehouseLocationName}}/{{item.shelfCode}}
            </div>
            <div class="box-input">
              <InputNumber :min="0" :max="rowItem.goodsQty" v-model="item.total" controls-outside></InputNumber>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "purchase",
  data() {
    return {
      list: [],
      titleName: "",
      warehouseName: "",
      regionName: "",
      regionId: "",
      treeList: [],
      tableList: [],
      allSkuItem: {},
      index: 0,
    };
  },
  props: {
    shelfGoodsList: Array,
    rowItem: Object,
    goodsIndex: Number
  },
  created() {},
  components: {},
  mounted() {
    this.getAreaList();
  },
  methods: {
    submit(){
      let localtions = new Array()
      this.tableList.forEach(element => {
        let localtion = new Object()
        localtion.areaCode = element.areaCode
        localtion.locationCode = element.locationCode
        localtion.shelfCode = element.shelfCode
        localtion.total = element.total
        localtion.warehouseAreaId = element.warehouseAreaId
        localtion.warehouseAreaName = element.warehouseAreaName
        localtion.warehouseId = element.warehouseId
        localtion.warehouseLocationId = element.warehouseLocationId
        localtion.warehouseLocationName = element.warehouseLocationName
        localtion.warehouseName = element.warehouseName
        localtion.warehouseShelfId = element.warehouseShelfId
        localtion.x = element.x
        localtion.y = element.y
        localtions.push(localtion)
      })
      let lable = ""
      this.tableList.forEach(element => {
        lable += `${element.warehouseAreaName}/${element.warehouseLocationName}/${element.shelfCode}/数量${element.total},`
      })
      return {
        data: localtions,
        lable: lable.substring(0,lable.length-1),
        index: this.goodsIndex
      }
    },
    checkChange(e) {
      this.tableList = [];
      e.forEach((item) => {
        if (!item.children) {
          delete item.title
          this.tableList.push(item);
        }
      });
      console.log("this.shelfList");
      console.log(this.shelfList);
    },
    loadData(ob, callback) {
      if (ob.warehouseAreaId) {
        // 货区查询
        new this.$rest({
          service: "agroerp-wms",
          url: "/v1.0/plus/get/all/location",
          gateway: 'agroerp',
          query: {
            equal: ob.warehouseAreaId,
          },
          action: (res) => {
            if (res.data.code === 20000) {
              const data = res.data.data;
              let list = [];
              data.forEach((item) => {
                let poData = {
                  title: item.code,
                  areaCode: ob.code,
                  locationCode: item.code,
                  warehouseLocationId: item.warehouseLocationId,
                  loading: false,
                  children: [],
                };
                list.push(poData);
              });
              callback(list);
            } else {
              this.$Notice.warning({
                title: "库位获取失败",
                desc: `失败原因：${res.data.msg}`,
              });
            }
          },
        }).get();
      } else if (ob.warehouseLocationId) {
        //货位查询
        new this.$rest({
          service: "agroerp-wms",
          url: "/v1.0/plus/get/all/shelf",
          gateway: 'agroerp',
          query: {
            equal: ob.warehouseLocationId,
          },
          action: (res) => {
            if (res.data.code === 20000) {
              const data = res.data.data;
              let list = [];
              data.forEach((item) => {
                let poData = {
                  shelfCode: item.code,
                  areaCode: ob.areaCode,
                  locationCode: ob.locationCode,
                  title: item.code,
                  warehouseShelfId: item.warehouseShelfId, //货位id
                  warehouseShelfName: item.warehouseShelfName, //货位id
                  warehouseId: item.warehouseId, //仓库
                  warehouseName: item.warehouseName,
                  warehouseAreaId: item.warehouseAreaId, //库区
                  warehouseAreaName: item.warehouseAreaName,
                  warehouseLocationId: item.warehouseLocationId, //库位
                  warehouseLocationName: item.warehouseLocationName,
                  x: item.x, //库位
                  y: item.y,
                  total: 0,
                };
                list.push(poData)
              });
              callback(list)
            } else {
              this.$Notice.warning({
                title: "货位获取失败",
                desc: `失败原因：${res.data.msg}`,
              });
            }
          },
        }).get();
      }
    },
    //库区查询
    getAreaList() {
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-wms",
        url: "/v1.0/warehouse/area/page",
        query: {
          pageIndex: 1, //limit 开始页 默认1
          pageSize: 100,
          equal: {
            warehouseId: this.$store.getWms('warehouseId')
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data.list;
            let list = [];
            data.forEach((item) => {
              let ob = {
                title: item.warehouseAreaName,
                code: item.code,
                warehouseAreaId: item.warehouseAreaId,
                loading: false,
                children: [],
              };
              list.push(ob);
            });
            this.treeList = list;
            console.log("this.treeData", this.treeData);
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "md-grid",
              },
              style: {
                marginRight: "8px",
              },
            }),
            h("span", data.title),
          ]),
          h("span", {
            style: {
              display: "inline-block",
              float: "right",
              marginRight: "32px",
            },
          }),
        ]
      );
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  background-color: FEFEEF;
  display: flex;
}
.left {
  width: 260px;
  min-height: 100%;
  border-right: 1px solid #dcdee2;
}
.right {
  width: 100%;
  margin-left: 20px;
}
.title {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.title-tags {
  display: flex;
  align-items: center;
  margin-left: 40px;
  font-size: 16px;
  font-weight: 500;
}
.tags-box {
  width: 20px;
  height: 20px;
  background-color: #2db7f5;
  margin-right: 20px;
  margin-left: 10px;
}
.tags-box1 {
  width: 20px;
  height: 20px;
  background-color: #19be6b;
  margin-right: 20px;
  margin-left: 10px;
}
.tags-box2 {
  width: 20px;
  height: 20px;
  background-color: #ff9900;
  margin-right: 20px;
  margin-left: 10px;
}
.content {
  width: 100%;
}
.item {
  width: 100%;
  height: 40px;
  background-color: yellow;
}
.content-box {
  display: flex;
  align-items: center;
  background-color: #e8eaec;
  margin: 20px;
  padding: 10px;
}
.box-title {
  margin-right: 20px;
}
</style>